<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环绕动画-月亮绕地球转</title>
</head>
<style>
    canvas {
        display: flex;
        margin: 0 auto;
        background-color: #000;
    }
</style>

<body>
    <canvas width="800" height="600" id="canvas"></canvas>
</body>
<script></script>
<script>
    let canvas = document.getElementById('canvas')
    let context = canvas.getContext('2d')

    let earthAngle = 0
    let moonAngle = 0

    let sun = new Image()
    sun.src = '../assets/sun.png'
    let earth = new Image()
    earth.src = '../assets/earth.png'
    let moon = new Image()
    moon.src = '../assets/moon.png'

    //loop1图片展示  loop2 canvas元素展示
    // requestAnimationFrame(loop1)
    requestAnimationFrame(loop2)

    function loop1() {
        //save：用来保存最近一次的Canvas的状态和属性。
        context.save()

        //清画布
        context.clearRect(0, 0, canvas.width, canvas.height)

        //太阳
        // sun.onload = function () {
        context.beginPath()
        context.drawImage(sun, 300, 200, 200, 200)
        context.closePath()
        // }

        //地球
        // earth.onload = function () {
        context.beginPath()
        context.translate(400, 300)
        earthAngle = earthAngle % 360
        earthAngle++
        context.rotate((earthAngle) * (Math.PI / 180))
        context.drawImage(earth, 150, -50, 100, 100)
        context.closePath()
        // }

        //月亮
        // moon.onload = function () {
        context.beginPath()
        context.translate(200, 0) //这次的移动基于上次的位移之后
        moonAngle = moonAngle % 360
        moonAngle += 2
        context.rotate((moonAngle) * (Math.PI / 180))
        context.drawImage(moon, 60, -20, 40, 40)
        context.closePath()
        // }

        //restore：用来获取save保存的Canvas之前的状态和属性。防止save后对Canvas执行的平移、放缩、旋转、错切、裁剪等可以改变画布的操作对后续的绘制的影响。
        context.restore()

        requestAnimationFrame(loop1)
    }
    function loop2() {
        //save：用来保存最近一次的Canvas的状态和属性。
        context.save()

        //清画布
        context.clearRect(0, 0, canvas.width, canvas.height)

        //太阳
        context.beginPath()
        context.arc(400, 300, 100, 0, 360 * (Math.PI / 180))
        context.fillStyle = '#eae707'
        context.shadowColor = '#eae707'
        context.shadowBlur = 10
        context.fill()
        context.closePath()

        //地球
        context.beginPath()
        context.translate(400, 300)
        context.rotate((earthAngle++) * (Math.PI / 180))
        context.arc(200, 0, 30, 0, 360 * (Math.PI / 180))
        context.fillStyle = 'blue'
        context.shadowBlur = 0
        context.fill()
        context.closePath()

        //月亮
        context.beginPath()
        context.translate(200, 0) //这次的移动基于上次的位移之后
        context.rotate((moonAngle++) * (Math.PI / 180))
        context.arc(60, 0, 10, 0, 360 * (Math.PI / 180))
        context.fillStyle = '#fff'
        context.fill()
        context.closePath()

        //restore：用来获取save保存的Canvas之前的状态和属性。防止save后对Canvas执行的平移、放缩、旋转、错切、裁剪等可以改变画布的操作对后续的绘制的影响。
        context.restore()

        requestAnimationFrame(loop2)
    }

</script>

</html>